<template>
    <el-dialog class="ui-extra-select-dlg" v-model="dialogVisible" top="5vh" :title="dialogTitle" ref="dialog" @opened="init" :beforeClose="beforeClose" @closed="finalThings">
        <store-panel :store-id="storeId" :mh="mh" :show="true" :is-rack="isRack" :stores="stores" :show-op="false"></store-panel>
    </el-dialog>
</template>
<script>
import { reactive, computed, toRefs,defineAsyncComponent } from 'vue-demi';
const StorePanel = defineAsyncComponent(()=>import('./StorePanel.vue'));

export default {
    components:{
        StorePanel
    },
    props:{
        q:Object,
        done: Function,
        storeId: Number,
        stores:Array,
        mh:Number,
        isRack:Boolean
    },
    setup:(props)=>{
        const data = reactive({
            dialogVisible: true,
            dialogTitle:'补选商品',
            dialog:null,
        }),
        methods = {
            onSure:()=>{data.dialogVisible = false},
            onCancel:()=>{
                data.dialogVisible = false;
            },
            init:()=>{

            },
            beforeClose:(next)=>{
                next();
            },
            finalThings:()=>props.done()
            
        };
        return {
            ...toRefs(data),
            ...methods
        }
    }
}
</script>
<style lang="scss">
.ui-extra-select-dlg{
    width:65rem;max-width: 65rem;
    .el-dialog__body{
        padding: .5rem 1rem 1.5rem 1rem;
    }
}
</style>